<template>
    <div>
        <el-table :data="orderList" stripe style="width: 1000px;margin-bottom: 50px;" >
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" >
                    <el-form-item label="收货人">
                        <span>{{ props.row.consigneeName }}</span>
                    </el-form-item>
                    <el-form-item label="手机号">
                        <span>{{ props.row.telephone }}</span>
                    </el-form-item>
                    <el-form-item label="收货地址">
                        <span>{{ props.row.address }}</span>
                    </el-form-item>
                    </el-form>
                </template>
                </el-table-column>
            <el-table-column prop="picture" label="商品" width="100" align="center">
                <template slot-scope="scope">
                    <img :src="scope.row.picture" width="80px">
                </template>
            </el-table-column>
            <el-table-column prop="goodsName" label="" width="180px">
                <template slot-scope="scope">
                    <span style="font-size: 10px;">{{ scope.row.goodsName }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="orderNumber" label="订单号" width="200px" align="center" > </el-table-column>
            <el-table-column prop="goodsNum" label="数量" width="80px" align="center" > </el-table-column>
            <el-table-column prop="goodsPrice" label="单价" width="120px" align="center"> </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                <el-button type="primary"  @click="urge(scope.row)">催促发货</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import orderApi from "@/api/order/order";
export default {
    data() {
        return {
            orderStatus: 2,
            orderList: []

        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        fetchData(){
            orderApi.getOrderByOrderStatus(this.orderStatus)
            .then(response =>{
                this.orderList = response.data
            })
        },
        urge(row){
            this.$message({
                message: '以催促发货',
                type: 'success'
            });
        }
    },
}
</script>

<style>
#app{
    background: rgb(246, 246, 246);
    height: 100%;
    overflow: scroll;
  }
</style>